<template>
  <div class="container">
    <div class="heade">
      <div class="header">
        <span class="text1">品牌管理</span>
        <!-- 收起筛选/展开筛选 -->
        <span class="text4" @click="isShow = !isShow">
          <i class="el-icon-arrow-down" v-if="!isShow">展开筛选</i>
          <i class="el-icon-arrow-up" v-if="isShow">收起筛选</i>
        </span>
        <el-button type="primary" size="mini" @click="search">全部显示</el-button>
        <el-button type="primary" size="mini" class="info" @click="searchByName">查询结果</el-button>
      </div>
      <!-- 以下div为筛选查询 -->
      <div class="heade-text" v-show="isShow">
        <el-form ref="form" label-width="100px"
          class="heade-form">
          <el-form-item label="输入搜索：">
            <el-input v-model="name" placeholder="品牌名称/关键词" style="width: 200px"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="between">
      <div class="header">
        <span class="text">数据列表</span>
        <el-button type="primary" size="mini" class="info1" @click="dialogVisible = true">添加</el-button>
        <el-button type="primary" size="mini" class="info">导出</el-button>
        <!-- 添加窗口 -->
        <el-dialog title="添加品牌" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
          <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
              <el-input v-model="brand.name"></el-input>
            </el-form-item>
            <el-form-item label="品牌logo">
              <el-input v-model="brand.logo"></el-input>
            </el-form-item>
            <el-form-item label="级别">
              <el-input v-model="brand.level"></el-input>
            </el-form-item>
            <el-form-item label="上级">
              <el-input v-model="brand.upLevel"></el-input>
            </el-form-item>
            <el-form-item label="品牌故事">
              <el-input v-model="brand.story"></el-input>
            </el-form-item>
              <el-button type="primary" @click="add">立即创建</el-button>
            
          </el-form>
        </el-dialog>
      </div>
      <div class="between-table">
        <el-table :header-cell-style="{ fontSize: '14px', textAlign: 'center' }"
          :cell-style="{ fontSize: '12px', textAlign: 'center' }" ref="multipleTable" :data="brandList"
          border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column prop="id" label="编号"></el-table-column>
          <el-table-column prop="name" label="品牌名称"></el-table-column>
          <el-table-column prop="level" label="级别"></el-table-column>
          <el-table-column  label="商品种类数量">
            <template scope="scope">
              <router-link :to="{path:'/productinformation',query:{data:scope.row.name}}" class="column">{{scope.row.id}}</router-link>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template scope="scope">
              <el-button type="text" @click="deleteBran(scope.row)" size="small">删除</el-button>
              <el-button type="text" @click="handleEdit(scope.row)" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px; display: flex">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000">
            </el-pagination>
          </div>
        </div>
        <!-- 编辑窗口 -->
        <el-dialog title="修改品牌" :visible.sync="dialog2Visible" width="40%" :before-close="handleClose">
          <el-form ref="form" :model="brand1" label-width="80px">
            <el-form-item label="品牌名称">
              <el-input v-model="brand1.name"></el-input>
            </el-form-item>
            <el-form-item label="品牌logo">
              <el-input v-model="brand1.logo"></el-input>
            </el-form-item>
            <el-form-item label="级别">
              <el-input v-model="brand1.level"></el-input>
            </el-form-item>
            <el-form-item label="上级">
              <el-input v-model="brand1.upLevel"></el-input>
            </el-form-item>
            <el-form-item label="品牌故事">
              <el-input v-model="brand1.story"></el-input>
            </el-form-item>
              <el-button type="primary" @click="updateBran">确认</el-button>
            
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import{addBrand,deleteBrand,updateBrand,queryAll,queryBrandByName} from '@/api/brand.js'
export default {
  data() {
    return {
      isShow: true,
      name:"",
      brandList: [],
      multipleSelection: [],
      dialogVisible: false,
      dialog2Visible: false,
      brand: {
        name:"九年级",
        logo:"幸福感v从表面",
        level:"2级",
        upLevel:"下逐客令",
        story:"看看密集出版社v西瓜石像鬼"
      },
      brand1:{}
    };
  },
  created(){
    this.search();
  },
  methods: {
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // },
    add(){
      addBrand(this.brand).then(
        response=>{
          if(response.data.code==0){
            // console.log(response.data)
            this.search();
            this.dialogVisible=false;
          }else{
            alert(response.data.msg);
          }
        },error => {console.log('失败了',error);}
      )
    },
    deleteBran(row){
      console.log(row);
      deleteBrand(row.id).then(
        response=>{
          if(response.data.code==0){
            this.search();
            alert("删除成功");
          }else{
            alert(response.data.msg);
          }
        },error => {console.log('失败了',error);}
      )
    },
    handleEdit(row){
      this.brand1=row;
      this.dialog2Visible=true;
    },
    updateBran(){
      updateBrand(this.brand1).then(
        response=>{
          if(response.data.code==0){
            this.search();
            alert("更新成功");
            this.dialog2Visible=false;
          }else{
            alert(response.data.msg);
          }
        },error => {console.log('失败了',error);}
      )
    },
    search() {
      queryAll().then(
        response=>{
          if(response.data.code==0){
            console.log(response);
            this.brandList=response.data.data;
          }else{
            alert(response.data.msg);
          }
        }
      )
    },
    searchByName(){
      queryBrandByName(this.name).then(
        response=>{
          if(response.data.code==0){
            console.log(response.data)
            this.brandList=response.data.data;
            this.name="";
          }else{
            alert(response.data.msg);
          }
        }
      )
    },
  },
};
</script>

<style>
.heade-text {
  border: 1px solid rgba(228, 228, 228, 1);
  text-align: center;
}

.heade-form {
  display: flex;
  position: relative;
  top: 12px;
}

.text1 {
  font-size: 14px;
  position: absolute;
  left: 12px;
}

.text2 {
  font-size: 12px;
  position: absolute;
  left: 100px;
  color: red;
}

.text3 {
  font-size: 12px;
  position: absolute;
  left: 180px;
  color: red;
}

.text4 {
  font-size: 12px;
  position: absolute;
  right: 340px;
  cursor: pointer;
}

.info1 {
  font-size: 14px;
  position: absolute;
  right: 150px;
  top: 14px;
}

.info {
  font-size: 14px;
  position: absolute;
  right: 12px;
  top: 14px;
}

.header {
  position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(243, 243, 243, 1);
  border: 1px solid rgba(228, 228, 228, 1);
}

.between .header {
  margin-top: 20px;
}

.column {
  font-size: 12px;
  margin-right: 5px;
}
</style>